<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- <link rel='stylesheet' type='text/css' href='./printContent.css'> -->
</head>
<body>
    <a href="javascript:void(0);" class="dayin">打印</a>

    <!-- 需要打印的内容区域 printcontent ！！ -->
    <div id="printcontent">
        <table >
            <tr>
                <th>名</th>
                <th>作</th>
                <th>内</th>
            </tr>
            <tr>
                <td>浣溪沙</td>
                <td>[宋] 赵彦端</td>
                <td>菊已开时梅未通。似寒如暖意融融。情亲语妙一杯中。歌舞欲来须更理，林泉有乐政须同。好诗多味酒无功。</td>
            </tr>
            <tr>
                <td>春暮</td>
                <td>[宋] 方岳</td>
                <td>卷中未有好诗看，草满池塘梦已残。客又不来春又暮，一帘新雨杏花寒。</td>
            </tr>
        </table>
        <img src="https://www.shicimingju.com/pics/item/2973.jpg" alt="">
    </div>

    <script>
        $('.dayin').click(function(){
            doPrint3()
        })
        
        function doPrint3(){
            // 获取 (还不存在的 iframe 区域)
            var iframe=document.getElementById("print-iframe");

            //判断iframe是否存在，不存在则创建iframe
            if(!iframe){  
                // 获取 需要打印的区域
                var el = document.getElementById("printcontent");
                // 创建 iframe 元素标签
                iframe = document.createElement('IFRAME');
                //
                var doc = null;
                //设定 iframe 元素标签 id, 以供调用
                iframe.setAttribute("id", "print-iframe");
                // 设定 iframe 元素标签 样式！！
                // 即 使其 脱离文档流
                    // position:absolute;
                    // width:0px;
                    // height:0px;
                    // left:-500px;
                    // top:-500px;
                iframe.setAttribute('style', `
                    width:793px;
                    height:1122px;
                    border:none;
                `);
                // 将 iframe 添加到 body 中
                document.body.appendChild(iframe);

                //contentDocument 属性能够以 HTML 对象来返回 iframe 中的文档。
                doc = iframe.contentWindow.document;

                // 在 iframe 中写入 新的html 文件
                // 创建 iframe 就已有 基本结构
                /*
                    <html>
                        <head></head>
                        <body></body>
                    </html>
                */

                // 但是我准备直接覆写掉
                doc.write(`
                    <!DOCTYPE html>
                    <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <title>My Resume</title>
                        <!-- ！！引入 控制iframe 打印的css -->
                        <link rel='stylesheet' type='text/css' href='./printContent.css'>
                    </head>
                    <body>
                        ${el.outerHTML}
                    </body>
                    </html>
                `)
                // <link rel='stylesheet' type='text/css' href='E:/编程/前端基础练习/Vue_学习/Resume/resumeProject/test/printContent.css'>
                console.log(doc)
         
            }

            //调用 iframe 的打印            
            iframe.contentWindow.print();

            //？？？ -- 应该处理 IE 的某些情况
            if (navigator.userAgent.indexOf("MSIE") > 0){
                document.body.removeChild(iframe);
            }
        }

        doPrint3()
    </script>


</body>
</html>
<!-- 
    Frame/IFrame contentWindow 属性 
    https://www.runoob.com/jsref/prop-frame-contentwindow.html
    - contentDocument 属性能够以 HTML 对象来返回 iframe 中的文档。
    - 可以通过所有标准的 DOM 方法来处理被返回的对象。


 -->

